<template>
  <div class="Sub_account">
    <c-title :hide="false" text="城主身份证号"></c-title>
    <van-tabs v-model="active" title-active-color="#F15353" @change="tabChange">
      <van-tab title="未转让" name="2"></van-tab>
      <van-tab title="转让中" name="1"></van-tab>
      <van-tab title="已转让" name="3"></van-tab>
    </van-tabs>
    <template v-if="active == 2 && is_transference">
      <div class="BatchConvert" v-if="!isbatch" @click="isbatchOpen"><i class="iconfont icon-a-zhuanranggai"></i>批量转让</div>
      <div class="BatchConvert" v-else @click="isbatchPost">完成</div>
    </template>
    <div class="list" :class="[active != 0 ? 'ptop' : '']" v-if="list.length > 0">
      <template v-if="active == 2">
        <van-checkbox-group v-model="result">
          <div class="lis" v-for="(item, index) in list" :key="index">
            <div class="lis_t">
              <div class="is_id">
                <van-checkbox :name="item.id" checked-color="#ee0a24" v-if="isbatch"> </van-checkbox>
                <div class="txt">城主身份证号：{{ item.id }}</div>
              </div>
              <div class="btn" @click="transferenceOnces(item.id)" v-if="!isbatch && is_transference">转让</div>
            </div>
            <div class="lis_b">
              <div class="lis_b_cell">
                支付金额:<span class="co">¥{{ item.pay_price }}</span>
              </div>
              <div class="lis_b_cell">
                购买时间:<span class="co nco">{{ item.buy_time }}</span>
              </div>
            </div>
          </div>
        </van-checkbox-group>
      </template>
      <template v-if="active == 1">
        <div class="lis" v-for="(item, index) in list" :key="index">
          <div class="lis_t">
            <div class="is_id">
              <div class="txt">城主身份证号：{{ item.id }}</div>
            </div>
            <div class="btn" @click="cancelSell(item.id)">撤销</div>
          </div>
          <div class="lis_b">
            <div class="lis_b_cell">
              支付金额:<span class="co">¥{{ item.pay_price }}</span>
            </div>
            <div class="lis_b_cell">
              当前金额:<span class="co">¥{{ item.price }}</span>
            </div>
            <div class="lis_b_cell">
              挂售时间:<span class="co nco">{{ item.sale_time }}</span>
            </div>
          </div>
        </div>
      </template>
      <template v-if="active == 3">
        <div class="lis" v-for="(item, index) in list" :key="index">
          <div class="lis_t">
            <div class="is_id">
              <div class="txt">城主身份证号：{{ item.id || item.subid }}</div>
            </div>
          </div>
          <div class="lis_b">
            <div class="lis_b_cell">
              支付金额:<span class="co">¥{{ item.sale_price }}</span>
            </div>
            <div class="lis_b_cell">
              卖出收入:<span class="co">¥{{ item.obtain }}</span>
            </div>
            <div class="lis_b_cell">
              出售时间:<span class="co nco">{{ item.sale_time }}</span>
            </div>
          </div>
        </div>
      </template>
    </div>
    <van-empty image="search" description="暂无更多" v-else />
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      active: 1,
      isbatch: false,
      result: [],
      list: [],
      is_transference: false,

      isLoadMore: true,
      page: 1,
      total_page: 0
    };
  },
  activated() {
    this.init();
    this.getData();
  },
  methods: {
    init(){
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
      this.list = [];
    },
    isbatchOpen() {
      if (this.list.length <= 0) return;
      this.isbatch = true;
    },
    async isbatchPost() {
      if (this.result.length <= 0) {
        this.isbatch = false;
        return;
      }
      this.transferencePost(this.result);
    },
    tabChange() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
      this.list = [];
      this.getData();
    },
    async getData() {
      let urlstr = "plugin.project-party.frontend.controllers.child-id.index";
      let json = {
        page: this.page
      };
      if (this.active == 3) {
        urlstr = "plugin.project-party.frontend.controllers.child-id.sellDetails";
      } else {
        json.status = this.active;
      }
      let { data, result } = await $http.post(urlstr, json, "");
      if (result) {
        this.list = data.list?.data;
        this.total_page = data?.list.pages;
        if (!this.total_page) {
          this.total_page = 0;
        }
        this.isLoadMore = true;
        if (this.active == 2) {
          this.is_transference = data.is_transference ? true : false;
        }
      } else {
        this.isLoadMore = false;
      }
    },
    async cancelSell(id) {
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.child_id.cancelSell", { child_id: id }, "");
      if (result) {
        console.log(data);
        this.$toast(msg);
        this.getData();
      } else {
        this.$toast(msg);
      }
    },
    async transferenceOnces(cid) {
      let ids = [cid];
      this.transferencePost(ids);
    },
    async transferencePost(ids) {
      let { data, msg, result } = await $http.post("plugin.project-party.frontend.controllers.child-id.transference", { child_ids: ids }, "");
      console.log(data);
      if (result) {
        this.$toast(msg);
        if (this.isbatch) {
          this.isbatch = !this.isbatch;
        }
        this.getData();
      } else {
        this.$toast(msg);
      }
    },
    getMoreData() {
      let urlstr = "plugin.project-party.frontend.controllers.child-id.index";
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page) {
        return;
      } else {
        this.page += 1;
        let json = {
          page: this.page
        };
        if (this.active == 3) {
          urlstr = "plugin.project-party.frontend.controllers.child-id.sellDetails";
        } else {
          json.status = this.active;
        }
        $http
          .get(urlstr, json, "加载中")
          .then(res => {
            this.isLoadMore = true;
            if (res.result == 1) {
              this.list = this.list.concat(res.data.list.data);
            } else {
              this.page = this.page - 1;
              this.isLoadMore = false;
            }
          })
          .catch(error => {
            console.log(error);
          });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.BatchConvert {
  font-size: 0.81rem;
  font-weight: 500;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  margin: 0.97rem 1.5rem;
  .icon-a-zhuanranggai {
    margin-right: 0.34rem;
  }
}
.list {
  margin: 0 0.75rem;
  padding-bottom: 2rem;
  .lis {
    padding: 0.63rem 0.75rem 0 0.75rem;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 0.63rem;
    border-radius: 0.5rem;
    .lis_b {
      padding: 0.94rem 0;
      box-sizing: border-box;
      font-size: 0.81rem;
      color: #818181;
      text-align: left;
      .lis_b_cell {
        margin-bottom: 0.63rem;
        .co {
          color: #000;
          margin-left: 0.625rem;
        }
        .nco {
          color: #818181;
        }
      }
      .lis_b_cell:last-child {
        margin-bottom: 0;
      }
    }
    .lis_t {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-bottom: 0.63rem;
      border-bottom: 1px solid #f0f0f1;
      .is_id {
        flex: 1;
        font-size: 0.88rem;
        font-weight: bold;
        text-align: left;
        display: flex;
        overflow: hidden;
        .van-checkbox {
          flex-shrink: 0;
        }
        .txt {
          margin-left: 0.38rem;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
      .btn {
        flex-shrink: 0;
        width: 3.75rem;
        height: 1.75rem;
        background: #f15353;
        border-radius: 1.13rem;
        text-align: center;
        line-height: 1.75rem;
        color: #fff;
      }
    }
  }
}
.ptop {
  margin-top: 0.63rem;
}
</style>
